<script setup>
import { inject } from "vue";
import BaseButton from "../ui/BaseButton.vue";

// export default {
//   props: ["title", "description", "link"],
// };
defineProps(["id", "title", "description", "link"]);

const removeRes = inject("removeResource");
</script>

<template>
  <li>
    <BaseCard>
      <header>
        <h3>{{ title }}</h3>
        <BaseButton @click="removeRes(id)">Delete</BaseButton>
      </header>
      <p>{{ description }}</p>
      <nav>
        <a :href="link">View Resource</a>
      </nav>
    </BaseCard>
  </li>
</template>

<style scoped>
li {
  margin: auto;
  max-width: 40rem;
}
</style>
